<!-- 员工的请假申请页面 -->

<template>
    <div>
        <template v-if="userType === 'employee'">
            <el-divider>请假步骤</el-divider>
            <div>
                <el-steps :active="currentStep" :align-center="true" finish-status="success">
                    <el-step :title="currentStep1.title" :description="currentStep1.description" :status="currentStep1.status"></el-step>
                    <el-step :title="currentStep2.title" :description="currentStep2.description" :status="currentStep2.status"></el-step>
                    <el-step :title="currentStep3.title" :description="currentStep3.description" :status="currentStep3.status"></el-step>
                    <el-step title="已完成" description="您的申请已经完成" :status="finalSuccess"></el-step>
                </el-steps>
            </div>

            <el-divider>提示</el-divider>
            <div style="margin-top: 50px;margin-bottom:50px;">
                <template v-if="leaveStatus === '0'">
                    <h1>请您填写您的申请单</h1>
                </template>
                <template v-else-if="leaveStatus === '1'">
                    <h1>请耐心等待审批。。。</h1>
                </template>
                <template v-else-if="leaveStatus === '2'">
                    <h1>恭喜，已经通过审批。<br />假期到达的时候，您可以直接进入假期，但是假期结束之前您应该即使到本界面销假！</h1>
                    <div>
                        <el-button type="primary" @click="leaveEmploeeAgree" style="width: 200px;">销假</el-button>
                        <!-- <el-button type="warning" @click="leaveEmploeeDisagree">取消</el-button> -->
                    </div>
                </template>
                <template v-else-if="leaveStatus === '3'">
                    <h1>抱歉，您的审批未通过，失败！</h1>
                </template>
                <template v-else-if="leaveStatus === '4'">
                    <h1>恭喜，您的假期已经结束!</h1>
                </template>
                <template v-else-if="leaveStatus === '5'">
                    <h1>已经超过销假时间！</h1>
                </template>
            </div>
        </template>

        <el-divider>申请单如下</el-divider>
        <div style="text-align: left;">
            <el-form label-width="100px" label-position="right" :model="leaveApplicationForm">
                <el-form-item label="用户">
                    <el-input type="text" v-model="leaveApplicationForm.user_id" style="width: 400px;" disabled></el-input>
                </el-form-item>
                <el-form-item label="起始时间">
                    <el-date-picker v-model="leaveApplicationForm.time" type="datetimerange" start-placeholder="假期开始时间"
                        end-placeholder="假期结束时间" :disabled="leaveStatus !== '0'" style="width: 400px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="请假类型">
                    <el-select v-model="leaveApplicationForm.type" :disabled="leaveStatus !== '0'" style="width: 400px;">
                        <el-option key="病假" label="病假" value="病假"></el-option>
                        <el-option key="事假" label="事假" value="事假"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="
                    申请理由">
                    <el-input type="textarea" v-model="leaveApplicationForm.reason" placeholder="请输入您的申请理由" :rows="5"
                        :disabled="leaveStatus !== '0'">
                    </el-input>
                </el-form-item>

                <div style="text-align: center;">
                    <template v-if="userType === 'employee'">
                        <div>
                            <el-button type="primary" @click="leaveApply" :disabled="leaveStatus !== '0'">点击进行申请，进入下一步
                            </el-button>
                        </div>
                    </template>
                    <template v-else-if="userType === 'manager'">
                        <div>
                            <el-button type="primary" @click="leaveManagerAgree" :disabled="leaveStatus !== '1'">审批通过</el-button>
                            <el-button type="danger" @click="leaveManagerDisagree" :disabled="leaveStatus !== '1'">审批拒绝</el-button>
                        </div>
                    </template>
                </div>

            </el-form>
        </div>

    </div>
</template>

<script>
    import axios from "axios"
    import qs from "qs"


    export default {
        name: "leaveApplication",
        props: {
            leaveId: {
                type: String,
                required: false,
                default: null
            },
            userType: {
                type: String,
                required: false,
                default: "employee"
            }
        },
        data: function() {
            return {
                leaveApplicationForm: {
                    user_id: this.$store.state.userName,
                    reason: "",
                    type: "",
                    time: [],
                },
                currentStep: 1,
                currentStep1: {
                    title: "",
                    description: "",
                    status: ""
                },
                currentStep2: {
                    title: "",
                    description: "",
                    status: ""
                },
                currentStep3: {
                    title: "",
                    description: "",
                    status: ""
                },
                finalSuccess: "wait",

                /*
                    0: 未申请
                    1：已申请，等待审批； 
                    2：审批通过，等待员工确认；
                    3：审批未通过，失败；
                    4：审批通过，员工已确认；
                    5：审批通过，员工拒绝
                */
                leaveStatus: null, // 
            }
        },
        methods: {

            /**
             *  @description 点击提交请求
             *  @function leaveApply
             */
            leaveApply: function() {
                this.leaveStatus = "1";
                console.log(this.leaveApplicationForm);
                var _this = this;
                var startTime = _this.leaveApplicationForm.time[0];
                startTime = String(startTime.getYear() + 1900) + "-" + startTime.getMonth() + "-" + startTime.getDay() +
                    "-" + startTime.getHours() + "-" + startTime.getMinutes();

                var endTime = _this.leaveApplicationForm.time[1];
                endTime = String(endTime.getYear() + 1900) + "-" + endTime.getMonth() + "-" + endTime.getDay() +
                    "-" + endTime.getHours() +
                    "-" + endTime.getMinutes();

                axios.post("http://127.0.0.1:8000/api/leave/application/", JSON.stringify({
                        "user_id": _this.$store.state.userId,
                        "start_time": startTime,
                        "end_time": endTime,
                        "leave_reason": _this.leaveApplicationForm.reason,
                        "leave_type": _this.leaveApplicationForm.type
                    }))
                    .then(function(response) {
                        // console.log(response.data)
                        if (response.data.status === 0) {
                            _this.$message({
                                message: "申请提交成功，将会提醒主管（经理）进行审批",
                                type: "success"
                            })
                        } else {
                            _this.$message.error("申请提交失败");
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                        _this.$message.error("申请提交失败");
                    })

            },

            /**
             * @description 根据LeaveID获取这个Leave的详细信息
             * @function getLeaveDetailByLeaveId
             * @param leaveId
             */
            getLeaveDetailByLeaveId: function(leaveId) {
                if (this.leaveId != null) {
                    var _this = this;
                    axios.get("http://127.0.0.1:8000/api/leave/id/", {
                            params: {
                                leave_id: _this.leaveId
                            }
                        })
                        .then(function(response) {
                            // console.log(response.data.data);
                            _this.leaveApplicationForm.user_id = response.data.data.user_id;
                            _this.leaveApplicationForm.reason = response.data.data.leave_reason;
                            _this.leaveApplicationForm.type = response.data.data.leave_type;
                            _this.leaveStatus = response.data.data.leave_status;

                            var startTimeArray = response.data.data.start_time.split("-");
                            var startTime = new Date();
                            startTime.setFullYear(startTimeArray[0]);
                            startTime.setMonth(startTimeArray[1] - 1);
                            startTime.setDate(startTimeArray[2]);
                            startTime.setHours(startTimeArray[3]);
                            startTime.setMinutes(startTimeArray[4]);
                            startTime.setSeconds(0);

                            var endTimeArray = response.data.data.end_time.split("-");
                            var endTime = new Date();
                            endTime.setFullYear(endTimeArray[0]);
                            endTime.setMonth(endTimeArray[1] - 1);
                            endTime.setDate(endTimeArray[2]);
                            endTime.setHours(endTimeArray[3]);
                            endTime.setMinutes(endTimeArray[4]);
                            endTime.setSeconds(0);

                            _this.leaveApplicationForm.time = [startTime, endTime];

                            // console.log(_this.leaveApplicationForm.time)
                        })
                        .catch(function(error) {
                            console.log(error);
                        })
                }
            },

            /**
             * @description 员工方面，同意申请
             * @function leaveEmploeeAgree
             */
            leaveEmploeeAgree: function() {
                // console.log(this.leaveId);
                var _this = this;
                axios.post("http://127.0.0.1:8000/api/leave/employee/agreement/", qs.stringify({
                    "leave_id": _this.leaveId,
                }), {
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded "
                    }
                }).then(function(response) {
                    _this.leaveStatus = "4";
                    _this.$emit("getLeaveStatusData");
                }).catch(function(error) {
                    console.log(error);
                })
            },

            /**
             * @description 员工方面，拒绝申请
             */
            leaveEmploeeDisagree: function() {
                // console.log(this.leaveId);
                var _this = this;
                axios.post("http://127.0.0.1:8000/api/leave/employee/disagreement/", qs.stringify({
                    "leave_id": _this.leaveId,
                }), {
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded "
                    }
                }).then(function(response) {
                    _this.leaveStatus = "5";
                    _this.$emit("getLeaveStatusData");
                }).catch(function(error) {
                    console.log(error);
                })
            },

            /**
             * @description 经理方面，同意申请
             */
            leaveManagerAgree: function() {
                // console.log(this.leaveId);
                var _this = this;
                axios.post("http://127.0.0.1:8000/api/leave/manager/agreement/", qs.stringify({
                    "leave_id": _this.leaveId,
                }), {
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded "
                    }
                }).then(function(response) {
                    _this.leaveStatus = "2";
                    _this.$emit("getLeaveAll");
                    if (response.data.status === 0) {
                        _this.$message({
                            message: "审批成功，请您及时更改该员工在请假期间的班次",
                            type: "success"
                        })
                    } else {
                        _this.$message.error("审批失败");
                    }

                }).catch(function(error) {
                    // console.log(error);
                    _this.$message.error("审批失败");
                })
            },

            /**
             * @description 经理方面，拒绝申请
             */
            leaveManagerDisagree: function() {
                // console.log(this.leaveId);
                var _this = this;
                axios.post("http://127.0.0.1:8000/api/leave/manager/disagreement/", qs.stringify({
                    "leave_id": _this.leaveId,
                }), {
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded "
                    }
                }).then(function(response) {
                    _this.leaveStatus = "3";
                    _this.$emit("getLeaveAll");
                }).catch(function(error) {
                    console.log(error);
                })
            },
        },
        watch: {

            /**
             * @description 监听该变量，根据变量设定步骤各部分的数值
             */
            leaveStatus: function() {
                if (this.leaveStatus === "0") {
                    this.currentStep1 = {
                        title: "等待申请",
                        description: "等待您提交您的申请",
                        status: "process"
                    };
                    this.currentStep2 = {
                        title: "等待批准",
                        description: "等待经理或者主管审批",
                        status: "wait"
                    };
                    this.currentStep3 = {
                        title: "等待销假",
                        description: "等待您及时销假",
                        status: "wait"
                    };
                    this.finalSuccess = "wait";
                } else if (this.leaveStatus === "1") {
                    this.currentStep = 2;
                    this.currentStep1 = {
                        title: "申请已提交",
                        description: "申请已提交",
                        status: "success"
                    };
                    this.currentStep2 = {
                        title: "等待批准",
                        description: "等待经理或者主管审批",
                        status: "process"
                    };
                    this.currentStep3 = {
                        title: "等待销假",
                        description: "等待您及时销假",
                        status: "wait"
                    };
                } else if (this.leaveStatus === "2") {
                    this.currentStep = 3;
                    this.currentStep1 = {
                        title: "申请已提交",
                        description: "申请已提交",
                        status: "success"
                    };
                    this.currentStep2 = {
                        title: "已批准",
                        description: "已经获取经理或者主管审批",
                        status: "success"
                    };
                    this.currentStep3 = {
                       title: "等待销假",
                       description: "等待您及时销假",
                        status: "process"
                    };
                } else if (this.leaveStatus === "3") {
                    this.currentStep = 2;
                    this.currentStep1 = {
                        title: "申请已提交",
                        description: "申请已提交",
                        status: "success"
                    };
                    this.currentStep2 = {
                        title: "已批准",
                        description: "未获取经理或者主管审批",
                        status: "error"
                    };
                    this.currentStep3 = {
                        title: "等待销假",
                        description: "等待您及时销假",
                        status: "wait"
                    };
                } else if (this.leaveStatus === "4") {
                    this.currentStep = 4;
                    this.currentStep1 = {
                        title: "申请已提交",
                        description: "申请已提交",
                        status: "success"
                    };
                    this.currentStep2 = {
                        title: "已批准",
                        description: "已经获取经理或者主管审批",
                        status: "success"
                    };
                    this.currentStep3 = {
                        title: "已销假",
                        description: "您已经及时销假",
                        status: "success"
                    };
                    this.finalSuccess = "success";
                } else if (this.leaveStatus === "5") {
                    this.currentStep = 3;
                    this.currentStep1 = {
                        title: "申请已提交",
                        description: "申请已提交",
                        status: "success"
                    };
                    this.currentStep2 = {
                        title: "已批准",
                        description: "已经获取经理或者主管审批",
                        status: "success"
                    };
                    this.currentStep3 = {
                        title: "销假已超时",
                        description: "您没有及时销假",
                        status: "error"
                    };
                    this.finalSuccess = "wait";
                }
            },
            leaveId: function() {
                // console.log("leave id is changed");
                this.getLeaveDetailByLeaveId(this.leaveId);
            }
        },
        mounted: function() {
            this.getLeaveDetailByLeaveId(this.leaveId);
            this.leaveStatus = "0";
        },
        components: {}
    }
</script>

<style>
</style>
